<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Hello</title>
    <script src='jquery-1.11.2.min.js'></script>
    <script src='np.js'></script> 
    <script src='pjax.min.js'></script> 
      <style type="text/css">
/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #29d;

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
      -ms-transform: rotate(3deg) translate(0px, -4px);
          transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
          animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
    <script type="text/javascript">

    $(function(){
        //$(document).pjax('a', '#pjax-container');
        console.log(123);
        

/*          $.pjax({
  selector: 'a',
  container: '#pjax-container', //内容替换的容器
  show: 'fade',  //展现的动画，支持默认和fade, 可以自定义动画方式，这里为自定义的function即可。
  cache: true,  //是否使用缓存
  storage: true,  //是否使用本地存储
  titleSuffix: '', //标题后缀
  filter: function(){},
  callback: function(){}
})*/
    })
    </script>
    
  </head>
  <body>
    <div class='body'>
      <h1>Index</h1>
      <div id="pjax-container">
        Hello.
      Go to <a href='page2.html' class="pjax">Page 2</a> and view your console to see Pjax events.
      Clicking on <a href='index.html' class="pjax">this page</a> will just reload the page entierly.
      </div>
      
    </div>
    <script type="text/javascript">

//pjax
document.addEventListener('pjax:send', function() {
    NProgress.start();
});

document.addEventListener('pjax:complete', function() {
    NProgress.done();
});

document.addEventListener('pjax:error', function() {

});

document.addEventListener('pjax:success', function() {

});

document.addEventListener('DOMContentLoaded', function() {
    var pjax = new Pjax({
        elements: 'a.pjax',
        selectors: [
            'title',
            '#pjax-container'
        ]
    });
});

    </script>
  </body>
</html>
